<html>  
<head>  
	<meta charset="utf-8">  
	<title>10.10.1 矩形分区图</title>  
<style>

.nodeText {
	font-family: simsun;
	font-size: 16px;
	text-anchor: middle;
}

</style>
</head> 
<body>  
	<script src="../../d3/d3.min.js" charset="utf-8"></script>  
	<script>
	
	var width  = 800;	//SVG绘制区域的宽度
	var height = 700;	//SVG绘制区域的高度
			
	var svg = d3.select("body")			//选择<body>
				.append("svg")			//在<body>中添加<svg>
				.attr("width", width)	//设定<svg>的宽度属性
				.attr("height", height) //设定<svg>的高度属性
				.append("g")
				.attr("transform","translate(300,300)");

	var radius = 300;
	
	var partition = d3.layout.partition()
				.sort(null)
				.size([2 * Math.PI, radius * radius])
				.value(function(d) { return 1; });

	var arc = d3.svg.arc()
			.startAngle(function(d) { return d.x; })
			.endAngle(function(d) { return d.x + d.dx; })
			.innerRadius(function(d) { return Math.sqrt(d.y); })
			.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });


	d3.json("city.json", function(error, root) {

		if(error)
			console.log(error);
		console.log(root);

		var nodes = partition.nodes(root);
		var links = partition.links(nodes);

		console.log(nodes);
		
		var color = d3.scale.category20();

		var gArcs = svg.selectAll("g")
						  .data(nodes)
						  .enter()
						  .append("g");

		gArcs.append("path")
				.attr("display", function(d) { 		//圆中心的弧不绘制
					return d.depth ? null : "none"; 
				})
				.attr("d", arc)	//使用弧生成器
				.style("stroke", "#fff")
				.style("fill", function(d) { 
					return color((d.children ? d : d.parent).name); 
				});
				  
		gArcs.append("text")  
				.attr("class","nodeText")
				.attr("dy",".5em")
				.attr("transform",function(d,i){
					if( i !== 0 ){		//除圆中心的文字外，都进行平移旋转
					var r = d.x + d.dx/2;	//旋转角度

					//超过180°的文字调整旋转角度，防止文字是倒的
					var angle = Math.PI/2;
					r += r < Math.PI ? ( angle * -1 ) : angle ;
					r *= 180 / Math.PI;

					return  "translate(" + arc.centroid(d) + ")" +
							"rotate(" + r + ")";		
				}
			}) 
			.text(function(d,i) { return d.name; });
	  
	});
			
</script>	
		
</body>  
</html>  